<template>
	<view>
		<view>
			<swiper indicator-dots autoplay circular>
				<swiper-item v-for="swiper in detail.imgs" :key="swiper.id">
					<image class="banner-item" :src="swiper.thumb"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="hospital_info">
			<view class="hospital_top">
				<text class="hospital_name">{{detail.companyname}}</text>
				<image src="../../static/imgs/collect_icon.png"></image>
			</view>
			<view class="propert-box">
				<text>{{detail.grandparent_type}}</text>
				<text>{{detail.other_name}}</text>
				<text>{{detail.type}}</text>
			</view>
			<view class="info-item">
				<image class="before_image" src="../../static/imgs/comprehensive_score_icon.png"></image>
				<text>综合评分：三星</text>
				<view class="start-box">
					<image class="start-img" src="../../static/imgs/diamond.png"></image>
					<image class="start-img" src="../../static/imgs/diamond.png"></image>
					<image class="start-img" src="../../static/imgs/diamond.png"></image>
				</view>
			</view>
			<view class="info-item">
				<image class="before_image" src="../../static/imgs/business_area_icon.png"></image>
				<text>经营面积：{{detail.areas}}m2</text>
			</view>
			<view class="info-item char_num_box">
				<view>
					<image class="before_image" src="../../static/imgs/tooth_icon.png"></image>
					<text>牙科治疗椅：{{detail.chair}}台</text>
				</view>
				<text class="update_time">更新于 {{detail.time}}</text>
			</view>
			<view class="address_box">
				<text>{{detail.address}}</text>
				<text>地图/周边 ></text>
			</view>
			<view class="item-box">
				<view>
					<image class="before_image" src="../../static/imgs/tv_icon.png"></image>
					<text>仪器设备</text>
				</view>
				<view class="tvs">
					<text v-for="device in detail.device" :key="device.id">{{device}}</text>
				</view>
			</view>
			
			<view class="item-box comment_info">
				<view>
					<image class="before_image" src="../../static/imgs/comprehensive_score_icon.png"></image>
					<text class="score_desc">{{detail.rank.count_rank}}分</text>
					<text>{{detail.rank.tag}}</text>
				</view>
				<text class="score_desc">{{detail.rank.count.dianping_count}}条点评</text>
			</view>
			
			<view class="item-box">
				<view>
					<image class="before_image" src="../../static/imgs/btn_hospital_normal.png"></image>
					<text>特色服务</text>
				</view>
				<view class="services_item">
					<view class="service_box" v-for="service in detail.service_info" :key="service.id">
						<view class="service_image">
							<image :src="service.img"></image>
						</view>
						<text class="service_desc">{{service.name}}</text>
					</view>
				</view>
			</view>
			
			<view class="item-box">
				<view>
					<image class="before_image" src="../../static/imgs/treat_detail.png"></image>
					<text>基本信息</text>
				</view>
				<view class="content_box">
					<rich-text :nodes="detail.introduce"></rich-text>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id:0,
				detail:{}
			}
		},
		methods: {
			async getShoppingDetail(callback){
				const res = await this.$myRequest({
					url:'/index.php?m=app&c=hospital_page&a=hospital_content&id='+this.id
				})
				console.log(res);
				this.detail = res.data.data
			},
		},
		onLoad(options) {
			this.id = options.id
			this.getShoppingDetail()
		}
	}
</script>

<style>
.banner-item{
	width: 100%;
	/* height: 100%; */
}
.hospital_info{
	border: 1px solid #f1ecec;
	border-top-left-radius: 25px;
	border-top-right-radius: 25px;
	padding: 10px;
}
.hospital_top{
	display: flex;
	justify-content: space-between;
	/* padding: 10px; */
}
.hospital_name{
	font-size: 16px;
	font-weight: bold;
}
.hospital_top image{
	width: 20px;
	height: 20px;
}

.propert-box text{
	border: 1px solid #5a9ee2;
	border-radius: 5px;
	display: inline-block;
	margin: 5px;
	padding: 2px 4px;
	color: #5a9ee2;
	font-size: 15px;
}

.propert-box text:nth-child(1){
	margin-left: 0px;
}

.info-item{
	padding: 5px 0px;
	color: #5a5858;
}

.char_num_box{
	display: flex;
	justify-content: space-between;
}

.update_time{
	font-size: 13px;
	margin-top: 5px;
}

.before_image{
	width: 15px;
	height: 15px;
	vertical-align: middle;
	padding: 5px;
}

.services_item{
	display: flex;
	justify-content: flex-start;
	overflow-x: scroll;
}

.service_box{
	margin: 10px;
	text-align: center;
}

.service_image{
	text-align: center;
}
.service_image image{
	width: 35px;
	height: 35px;
	padding: 0 10px;
	border-radius: 50%;
}

.service_desc{
	font-size: 10px;
	color: #858383;
}

.start-box{
	display: inline-block;
}

.start-img{
	width: 10px;
	height: 10px;
	margin: 0 2px;
}
.address_box{
	border: 1px solid #f1ecec;
	margin-top: 20px;
	padding: 10px;
	background-color: #f1ecec;
	border-radius: 8px;
	font-size: 13px;
	display: flex;
	justify-content: space-between;
	color: #5a5858;
	margin-bottom: 30px;
}
.item-box{
	border-top: 1px solid #f1ecec;
	margin-top: 10px;
	padding: 10px 0;
	vertical-align: middle;
}
.tvs text{
	border: 1px solid red;
	text-align: center;
	border-radius: 25px;
	display: inline-block;
	padding: 2px 20px;
	margin: 5px;
	background-color: red;
	color: #fff;
	font-size: 12px;
}

.comment_info{
	display: flex;
	justify-content: space-between;
	font-size: 15px;
}
.score_desc{
	color: red;
	font-weight: bold;
}
.content_box{
	padding: 10px;
}
</style>
